<template>
  <div v-if="auth">
    <div class="home-title pt-32 pb-16">
      <div>操盘秘籍日刊</div>
      <div class="low-title">{{ updateTime }}</div>
    </div>
    <div class="hot-news">
      <div class="title-gradient"></div>
      <div v-if="newsList && newsList.length > 0">
        <ul class="how-news-list">
          <li
            v-for="(item, index) in newsList"
            :key="index"
            class="how-news-row"
            @click="goArticle(item)"
          >
            <i class="icon-sort" :class="'sort' + index">{{ index + 1 }}</i>
            <i>{{ item.title }}</i>
          </li>
        </ul>
        <div class="reviews-more" @click="goDetails">
          <span>查看更多</span> <i class="icon-more-normal"></i>
        </div>
      </div>
      <div v-else class="no-data-mode">暂无数据</div>
    </div>
  </div>
</template>

<script>
import query from '@/lib/query.js';
export default {
  name: 'HotNews',
  components: {},
  data() {
    return {
      auth: false,
      newsList: [],
      updateTime: '',
    };
  },
  created() {
    this.reqData();
  },
  methods: {
    goArticle(item) {
      const param = {
        url: item.link,
        title: item.title,
      };
      window.statConf.click('report.click');
      _t.openPdf(param);
    },
    goDetails() {
      // 跳转直播列表
      window.statConf.click('report.more');
      this.$router.push({ path: 'journalList', query: {} });
    },
    reqData() {
      const param = {
        page: 1,
        page_size: 4,
      };
      query
        .getHotNews(param)
        .then(res => {
          if (res.data?.auth) {
            this.formatData(res.data?.page);
            this.auth = true;
          }
        })
        .catch(err => {
          // 这里失败仅板块不展示
          this.catchErrHandler(err);
        });
    },
    formatData(data) {
      if (data && data.list) {
        this.newsList = data.list;
        if (this.newsList.length > 0) {
          const date = this.newsList[0].start_time;
          const start = 5;
          const length = 11;
          this.updateTime = `更新于${date.substr(start, length)}`;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.hot-news {
  overflow: hidden;
  border-radius: 0.12rem;
  background-color: #ffffff;
}

.reviews-more {
  margin-top: -0.24rem;
  height: 0.92rem;
  width: 100%;
  background: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;

  span {
    height: 0.92rem;
    font-size: 0.24rem;
    color: rgba(0, 0, 0, 0.4);
    line-height: 0.92rem;
    margin-right: 0.04rem;
  }
}
.title-gradient {
  height: 0.72rem;
  background-image: linear-gradient(180deg, #fff7ed, #ffffff 100%);
}
.update-time {
  height: 0.32rem;
  font-size: 0.24rem;
  color: #ff2436;
  line-height: 0.32rem;
  flex-grow: 1;
  padding-left: 0.16rem;
}
.how-news-list {
  margin-top: -0.4rem;
  padding: 0 0.2rem 0;
}
.how-news-row {
  height: 0.4rem;
  font-size: 0.32rem;
  line-height: 0.4rem;
  padding-bottom: 0.36rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  .icon-sort {
    font-weight: 700;
    padding-left: 0.02rem;
    padding-right: 0.14rem;
  }
  .sort0 {
    color: #ff2436;
  }
  .sort1 {
    color: #fe811a;
  }
  .sort2 {
    color: #fdc11e;
  }
  .sort3 {
    color: #fdcf1e;
  }
}
</style>
